<script setup>
import UserAgreement from '@/components/agreement/UserAgreement.vue'
import PrivacyPolicy from '@/components/agreement/PrivacyPolicy.vue'
import {ref, defineEmits, defineProps} from 'vue'

const emit = defineEmits(['setAgreementAgree'])
const props = defineProps({
  agree: Boolean
})
const agreeClick = () => {
  emit('setAgreementAgree', !props.agree)
}

const isShowUserAgreement = ref(false)
const isShowPrivacyPolicy = ref(false)
const cancel = () => {
  isShowUserAgreement.value = false
  isShowPrivacyPolicy.value = false
}
</script>

<template>
  <div class="agreement">
    <van-icon v-if="!props.agree" @click="agreeClick" name="passed" color="#CCCCCC"/>
    <van-icon v-else @click="agreeClick" name="checked" color="#4FAC91"/>
    我已阅读并同意
    <span @click="isShowUserAgreement = true">《用户协议》</span>
    <span @click="isShowPrivacyPolicy = true">《隐私政策》</span>
  </div>
  <UserAgreement v-if="isShowUserAgreement" @cancel="cancel" />
  <PrivacyPolicy v-if="isShowPrivacyPolicy" @cancel="cancel" />
</template>

<style scoped lang="scss">
.agreement{
  font-size: 1.4rem;
  span{
    color: var(--van-primary-color)
  }
}
</style>